<div nz-row [nzGutter]="8">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-tree [nzData]="nodes" nzAsyncData nzBlockNode (nzClick)="handlerNodeClick($event)"
      (nzExpandChange)="handlerNodeLoad($event)" nzVirtualHeight="{{outerHeight}}px" [nzTreeTemplate]="nzTreeTemplate">
    </nz-tree>
    <ng-template #nzTreeTemplate let-node let-origin="origin">
      <span (contextmenu)="handlerContextMenu($event, menu, origin)">
        <i class="fa fa-{{origin.type}}"></i>&nbsp;{{origin.title}}
      </span>
    </ng-template>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item *ngFor="let item of contextMenus" (click)="handlerContextMenuClick(item)">
          <i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.title}}
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <div class="inner-box">
      <app-component-antd-empty *ngIf="!selectNode; else hasComponentValue"></app-component-antd-empty>
      <ng-template #hasComponentValue>
        <nz-card nzTitle="{{selectNode.title}}" [nzExtra]="rightTemplate">
          <nz-skeleton *ngIf="loading.button; else hasSuccessTemplate" [nzActive]="true"></nz-skeleton>
          <ng-template #hasSuccessTemplate>
            <app-component-antd-empty *ngIf="items.length <= 0; else hasLoadTemplate">
            </app-component-antd-empty>
            <ng-template #hasLoadTemplate>
              <div nz-row nzJustify="space-around" [nzGutter]="[16, 16]">
                <div *ngFor="let item of items; let i = index" nz-col nzSpan="6">
                  <nz-card nzTitle="{{ (i + 1) + ': ' + item.name }}">
                    <nz-progress nz-popover [nzPopoverContent]="progressPopoverContent" nzType="circle"
                      [nzPercent]="item.value"
                      [nzStrokeColor]="{ '0%': '#87d068', '50%': '#d9651f', '100%': '#fc0202' }">
                    </nz-progress>
                    <ng-template #progressPopoverContent>
                      <nz-descriptions [nzTitle]="item.name" nzBordered [nzColumn]="1" nzSize="small">
                        <nz-descriptions-item *ngFor="let key of handlerKeys(item)" [nzTitle]="key">
                          {{item[key]}}
                        </nz-descriptions-item>
                      </nz-descriptions>
                    </ng-template>
                  </nz-card>
                </div>
              </div>
            </ng-template>
          </ng-template>
        </nz-card>
        <ng-template #rightTemplate>
          <nz-switch [(ngModel)]="switchType"
            *ngIf="selectNode.origin.type === 'disk' || selectNode.origin.type === 'server' "
            nzCheckedChildren="{{'common.disk'|translate}}" nzUnCheckedChildren="{{'common.database'|translate}}"
            (ngModelChange)="handlerNodeClick($event)">
          </nz-switch>
        </ng-template>
      </ng-template>
    </div>
  </div>
</div>
<app-component-info-server *ngIf="disabledComponent.server" [visible]="disabledComponent.server" [config]="rootNode"
  (emitter)="handlerContextMenuClose()">
</app-component-info-server>
<app-component-database *ngIf="disabledComponent.database.create" [visible]="disabledComponent.database.create"
  [config]="rootNode" (emitter)="handlerContextMenuClose()">
</app-component-database>
<app-component-database-drop *ngIf="disabledComponent.database.delete" [visible]="disabledComponent.database.delete"
  [config]="rootNode" [value]="selectNode?.origin?.key" (emitter)="handlerContextMenuClose()">
</app-component-database-drop>
<app-component-database-structure *ngIf="disabledComponent.database.structure"
  [visible]="disabledComponent.database.structure" [config]="rootNode" [value]="selectNode?.origin?.key"
  (emitter)="handlerContextMenuClose()">
</app-component-database-structure>
<app-component-common-table *ngIf="disabledComponent.table" [visible]="disabledComponent.table" [config]="rootNode"
  [value]="selectNode" [database]="database" [menu]="selectMenu" (emitter)="handlerContextMenuClose()">
</app-component-common-table>
<app-component-common-column *ngIf="disabledComponent.column" [visible]="disabledComponent.column" [config]="rootNode"
  [value]="selectNode" [database]="database" [table]="table" [menu]="selectMenu" (emitter)="handlerContextMenuClose()">
</app-component-common-column>